<template>
  <div>
    <Headline :headline1="$t('m.FaceRecognition')+'  /  '" :headline2="$t('m.WeekPlan')" />
    <a-card style="width: 100%">
      <a-input-search
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        enter-button
        v-model="field.key"
        style="width: 200px; margin-right: 15px"
        @search="onSearch"
      />
      <a-button type="primary" icon="plus" @click="add" v-if="isTrue('face:week:add')"> {{$t('m.Add')}} </a-button>
      <a-modal
        :title="this.flag == true ? $t('m.NewWeekplay') : $t('m.EditWeekplay')"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :footer="null"
      >
        <a-form
          :form="form"
          :label-col="{ span: 9 }"
          :wrapper-col="{ span: 12 }"
          @submit="handleSubmit"
        >
          <a-form-item :label="$t('m.WeekPlanName')">
            <a-input
              v-decorator="[
                'planName',
                { rules: [{ required: true, message: this.$t('m.PleaseEnterWeekPlanName') }] },
              ]"
            />
          </a-form-item>

          <a-form-item :label="$t('m.MondayTimeName')">
            <a-select
              v-decorator="[
                'mon',
                { rules: [{ required: true, message:this.$t('m.pleaseChoose') }] },
              ]"
              :placeholder="$t('m.pleaseChoose')"
            >
              <a-select-option v-for="item in widgetData"
               :key="item.code" :value="item.code"> {{item.name}} </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.TuesdayTimeName')">
            <a-select
              v-decorator="[
                'tues',
                { rules: [{ required: true, message:this.$t('m.pleaseChoose') }] },
              ]"
              :placeholder="$t('m.pleaseChoose')"
            >
              <a-select-option v-for="item in widgetData"
               :key="item.code" :value="item.code"> {{item.name}} </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.WednesdayTimeName')">
            <a-select
              v-decorator="[
                'wed',
                { rules: [{ required: true, message:this.$t('m.pleaseChoose') }] },
              ]"
              :placeholder="$t('m.pleaseChoose')"
            >
              <a-select-option v-for="item in widgetData"
               :key="item.code" :value="item.code"> {{item.name}} </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.ThursdayTimeName')">
            <a-select
              v-decorator="[
                'thur',
                { rules: [{ required: true, message:this.$t('m.pleaseChoose') }] },
              ]"
              :placeholder="$t('m.pleaseChoose')"
            >
              <a-select-option v-for="item in widgetData"
               :key="item.code" :value="item.code"> {{item.name}} </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.FridayTimeName')">
            <a-select
              v-decorator="[
                'fri',
                { rules: [{ required: true, message:this.$t('m.pleaseChoose') }] },
              ]"
              :placeholder="$t('m.pleaseChoose')"
            >
              <a-select-option v-for="item in widgetData"
               :key="item.code" :value="item.code"> {{item.name}} </a-select-option>

            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.SaturdayTimeName')">
            <a-select
              v-decorator="[
                'sat',
                { rules: [{ required: true, message:this.$t('m.pleaseChoose') }] },
              ]"
              :placeholder="$t('m.pleaseChoose')"
            >
              <a-select-option v-for="item in widgetData"
               :key="item.code" :value="item.code"> {{item.name}} </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.SundayTimeName')">
            <a-select
              v-decorator="[
                'sun',
                { rules: [{ required: true, message:this.$t('m.pleaseChoose') }] },
              ]"
              :placeholder="$t('m.pleaseChoose')"
            >
              <a-select-option v-for="item in widgetData"
               :key="item.code" :value="item.code"> {{item.name}} </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit">{{$t("m.Ok")}} </a-button>
          </a-form-item>
        </a-form>
      </a-modal>
      <a-table
        style="margin-top: 30px"
        :columns="columns"
        :rowKey="(r, i) => i.toString()"
        :data-source="data"
        :pagination="false"
        bordered
      >
        <div slot="tags" slot-scope="text, tags, i">
          <a-button
            icon="edit"
            bordered
            type="primary"

            style="margin-right: 10px"
            @click="editWeek(text, tags, i)"
            :disabled="!isTrue('face:week:update')"
            >{{$t('m.Modification')}}</a-button
          >
          <a-button
            icon="delete"
            type="danger"

            :disabled="!isTrue('face:week:del')"
            @click="delWeek(text, tags, i)"
            >{{$t('m.Delete')}}</a-button
          >
        </div>
      </a-table>
      <a-pagination
        style="margin-top: 20px"
        show-size-changer
        :default-current="1"
        :total="total"
        @change="Pages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="onShowSizeChange"
        class="pages"
      />
    </a-card>
    <Delete ref="unitdelete" :dalete="dalete" @confirm="delIsok" />
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";

import {
  getWeekPlanList,
  saveWeekPlan,
  delWeekPlan,
  getWidgetComboboxList,
} from "@/api/faceRecognition";
import {Setperms} from '@/assets/js/setperms'
export default {
  name: "WeekPlay",
  components: { Headline, Delete },
  data() {
    return {
      flag:true,
      data: [],
      dalete: {
        titles: this.$t('m.DeleteThePrompt'),
        type: "exclamation-point",
        text: this.$t('m.AreYouSureToDeleteThisData'),
      },
      columns: [
        {
          title: this.$t('m.WeekPlanNumber'),
          dataIndex: "weekindex",
        },
        {
          title: this.$t('m.WeekPlanName'),
          dataIndex: "planName",
        },
        {
          title: this.$t('m.MondayTimeName'),
          dataIndex: "monname",
        },
        {
          title: this.$t('m.TuesdayTimeName'),
          dataIndex: "tuesname",
        },
        {
          title: this.$t('m.WednesdayTimeName'),
          dataIndex: "wedname",
        },
        {
          title: this.$t('m.ThursdayTimeName'),
          dataIndex: "thurname",
        },
        {
          title: this.$t('m.FridayTimeName'),
          dataIndex: "friname",
        },
        {
          title: this.$t('m.SaturdayTimeName'),
          dataIndex: "satname",
        },
        {
          title: this.$t('m.SundayTimeName'),
          dataIndex: "sunname",
        },
        {
          title:this.$t('m.Operation'),
          dataIndex: "tags",
          key: "tags",
          scopedSlots: { customRender: "tags" },
        },
      ],
      field: {
        start: 0,
        page: 1,
        limit: 10,
        key: "",
      },
      visible: false,
      form: this.$form.createForm(this, { name: "coordinated" }),
      delId: "",
      total: null,
      forminitialG: {
        table: "tb_face_timescheme",

        where: "1=1",
        fields: "id as code,timename as name",
        orderby: "timeindex asc",
      },
      widgetData:[],
      planid:'',
    };
  },
  created() {
    this.getData();
    this.getWidgetCombobox()
    this.parms = Setperms(this.$route.fullPath,JSON.parse(sessionStorage.getItem('menu')))
    console.log(this.parms)

  },
  methods: {
    isTrue(str){
      return this.parms.indexOf(str) !== -1;
    },
    getWidgetCombobox(){
      getWidgetComboboxList({ params: this.forminitialG })
      .then(res => {
        this.widgetData = res.data.data
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
    },
    onShowSizeChange(page, limit) {
      this.field.page = page;
      this.field.limit = limit;
      this.getData();
    },
    Pages(page, pageSize) {
      this.field.limit = pageSize;
      this.field.page = page;
      this.field.start = (page - 1) * pageSize;
      this.getData();
    },
    delIsok() {
      delWeekPlan({ planId: this.delId })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
            this.getData();
          }
          if (res.data.success == false) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("删除失败");
        });
      this.$refs.unitdelete.visible = false;
    },
    delWeek(text, tags, i) {
      this.delId = tags.planId;
      this.$refs.unitdelete.visible = true;

      console.log(tags);
    },
    editWeek(text, tags, i) {
      this.flag = false
      this.visible = true;
      console.log(tags);
      this.planid = tags.planId
      setTimeout(() => {
        this.form.setFieldsValue({
          ...tags,
        });
      }, 200);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          if(this.flag == true) {
            saveWeekPlan(values)
            .then((res) => {
              if (res.data.success == true) {
                this.$message.success(res.data.msg);
                this.getData();
              }
              if (res.data.success == false) {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$message.error("添加失败");
            });
          } else {
            values.planId = this.planid
          saveWeekPlan(values)
            .then((res) => {
              if (res.data.success == true) {
                this.$message.success(res.data.msg);
                this.getData();
              }
              if (res.data.success == false) {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$message.error("添加失败");
            });
            this.planid = ''
          }

            this.form.resetFields();
          this.visible = false;
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
    handleOk() {},
    add() {
      this.visible = true;
      this.flag = true
    },
    onSearch() {
      this.getData();
    },
    getData() {
      getWeekPlanList({ params: this.field })
        .then((res) => {
          this.total = res.data.total;
          this.data = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>
